<template>
  <view class="container">
    <!-- 头部 -->
    <view class="index-herder">
      <!-- 轮播图 -->
      <view class="banner-box padding-sm">
        <!-- <swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true"
      :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
      indicator-active-color="#0081ff">
          <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
            <view class="swiper-item">
              <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
            </view>
          </swiper-item>
        </swiper> -->
        <image class="banner-img" src="/static/banner1.png">
      </view>
      <!-- slogan -->
      <view class="slogan-box padding-lr-sm flex">
        <view class="slogan-item flex-sub margin-xs" :style="{backgroundImage: 'url(/static/slogan1.png)'}" @tap="gotoProductListPage(1)">
          <view>优惠机型</view>
        </view>
        <view class="slogan-item flex-sub margin-xs" :style="{backgroundImage: 'url(/static/slogan2.png)'}" @tap="gotoProductListPage(2)">
          <view>高档机型</view>
        </view>
        <view class="slogan-item flex-sub margin-xs" :style="{backgroundImage: 'url(/static/slogan3.png)'}">
          <view>租赁流程</view>
        </view>
        <view class="slogan-item flex-sub margin-xs" :style="{backgroundImage: 'url(/static/slogan4.png)'}">
          <view>正品保障</view>
        </view>
      </view>
      <!-- 公共消息通知 -->
      <view class="message-box flex text-xl padding-left-sm">
        <text class="cuIcon-notificationfill text-orange margin-right-sm"></text>
        <view class="message-content text-sm margin-right">
          <view v-for="(item, index) in noticeList" :key="index" @tap="tapNotice(item)">
            <view class="animation-slide-bottom" v-if="curNoticeIndex === index">
              {{ item.title }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 热租榜单 -->
    <view class="hotList-box margin-top-sm padding-sm">
      <text class="text-xl padding-left-sm">热租榜单</text>
      <scroll-view class="hotList-item-wrap margin-top-xs" scroll-x="true">
        <view class="hotList-item margin-xs padding-xs" v-for="(item, index) in hotList" :key="index" @tap="gotoProductDetailsPage(item.id)">
          <lazy-img :src="BASE_URL + item.image_logo" width="200rpx" height="200rpx"></lazy-img>
          <view class="text-cut">{{item.title}}</view>
          <view class="text-orange text-price">{{item.avg_price}}/{{RETUNIT_LIST[item.rentunit]}}</view>
        </view>
      </scroll-view>
    </view>

    <!-- 推荐榜单 -->
    <view class="recommendList-box margin-top-sm padding-sm">
      <view class="cu-list menu">
        <view class="cu-item arrow">
          <view class="content">
            <text class="text-xl">推荐榜单</text>
          </view>
          <view class="action" @tap="gotoProductListPage(3)">
            <text class="text-sm">查看更多</text>
          </view>
        </view>
      </view>

      <view class="recommendList-item-wrap">
        <view class="recommendList-item flex justify-between align-end padding-top-xs padding-bottom-xs" v-for="(item, index) in recommendList" :key="index" @tap="gotoProductDetailsPage(item.id)">
          <lazy-img class="image" :src="BASE_URL + item.image_logo" width="160rpx" height="160rpx"></lazy-img>
          <view class="content padding-left-sm">
            <view class="text-lg text-cut">{{item.title}}</view>
            <view class="text-gray text-sm margin-top-xs">{{item.isnodeposit ? '可免' : item.nodeposit }}押金</view>
            <view class="remark flex justify-between align-end">
              <view class="text-lg main-color margin-top-sm text-price">{{item.avg_price}}/{{RETUNIT_LIST[item.rentunit]}}</view>
              <view class="text-gray text-sm">{{item.rentday}}{{RETUNIT_LIST[item.rentunit]}}起租</view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'index', // 首页
  data() {
    return {
      cardCur: 0,
      curNoticeIndex: 0,
      noticeTimer: null,
      swiperList: [
        {
          id: 0,
          type: 'image',
          url: '/static/banner1.png'
        }, {
          id: 1,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
        }, {
          id: 2,
          type: 'image',
          url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
        }
      ],
      /** 公告列表 */
      noticeList: [],
      /** 热租列表 */
      hotList: [],
      /** 推荐列表 */
      recommendList: []
    }
  },
  computed: {
    ...mapState([
      'BASE_URL',
      'RETUNIT_LIST'
    ])
  },
  created() {
    this.init()
  },
  beforeDestroy() {
    this.clearTimer()
  },
  onPullDownRefresh() {
    this.init()
  },
  methods: {
    async init() {
      this.getHomeNotice()
      this.hotList = await this.getProductList(4)
      this.recommendList = await this.getProductList(3)
      uni.stopPullDownRefresh()
    },
    /** 获取首页公告 */
    getHomeNotice() {
      this.$api.getHomeNotice().then(res => {
        if (!res) return
        this.noticeList = res.data
        this.startNoticeAnimation()
      })
    },
    getFlow() {
      this.$api.getFlow().then(res => {
        console.log('租赁流程', res)
      })
    },
    startNoticeAnimation() {
      if (this.noticeList.length <= 0) return
      this.noticeTimer = setInterval(() => {
        this.curNoticeIndex++
        if (this.curNoticeIndex >= this.noticeList.length) {
          this.curNoticeIndex = 0
        }
      }, 5000)
    },
    tapNotice(item) {
      console.log('点击公告', item)
      // this.getNoticeDetail(1)
    },
    getNoticeDetail(id) {
      const params = {
        id
      }
      this.$api.getNoticeDetail(params).then(res => {
        console.log('获取公告详情', res)
      })
    },
    clearTimer() {
      if (this.noticeTimer === null) return
      clearInterval(this.noticeTimer)
    },
    /** 获取产品列表 */
    getProductList(keyword) {
      const params = {
        page: 1,
        pageSize: 20,
        keyword
      }
      return new Promise(resolve => {
        this.$api.getProductList(params).then(res => {
          console.log('获取产品列表', res)
          if (!res) return
          const resData = res.data
          resolve(resData.list)
        })
      })
    },
    cardSwiper(e) {
      this.cardCur = e.detail.current
    },
    gotoProductListPage(keyword = 0) {
      console.log('查看更多')
      this.$Router.push({
        name: 'product-list',
        params: { keyword }
      })
    },
    gotoProductDetailsPage(id = 0) {
      console.log('产品详情', id)
      this.$Router.push({
        name: 'product-details',
        params: { id }
      })
    }
  }
}
</script>

<style lang="less">
/** 头部 Start **/
.index-herder {
  background: #fff;
}
.banner {
  &-box {
    width: 100%;
    padding-bottom: 0;
  }
  
  &-img {
    width: 100%;
  }
}

.slogan {
  &-box {
    width: 100%;
    height: 190rpx;
  }

  &-item {
    padding-top: 120rpx;
    background-image: url('/static/slogan1.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 120rpx 120rpx;
    text-align: center;
  }
}

.message {
  &-box {
    width: 100%;
    height: 56rpx;
    line-height: 56rpx;
    border-top: 2rpx solid #eee;
    overflow: hidden;
  }
  &-content {
    width: 660rpx;
    overflow: hidden;
    white-space: nowrap;
  }
}
/** 头部 End **/

/** 热租榜单 Start **/
.hotList {
  &-box {
    width: 100%;
    height: 420rpx;
    padding-bottom: 0;
    background: #fff;
  }

  &-item-wrap {
    white-space: nowrap;
  }

  &-item {
    display: inline-block;
    width: 200rpx;
    height: 320rpx;
  }
}
/** 热租榜单 End **/

/** 推荐榜单 Start **/
.recommendList {
  &-box {
    background: #fff;

    .cu-item {
      min-height: 60rpx;
      border-bottom: 2rpx solid #eee;
    }

    .cu-list.menu-avatar>.cu-item .action {
      width: 150rpx;
    }
  }

  &-item {
    border-bottom: 2rpx solid #eee;

    .content {
      width: 530rpx;
      height: 160rpx;
    }
  }
}
/** 推荐榜单 End **/
</style>
